<template>
    <div class="component-pagination component_pagination_wc" :style="{ padding }">
        <div class="extra">
            <slot></slot>
        </div>
        <div class="page">
            <div class="total-pages" v-if="showTotalPage">当前第 {{ pageNum }}/{{ Math.ceil(total / pageSize) }} 页</div>
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                :layout="layout"
                background
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        total: Number,
        pageNum: {
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 20, 30, 40, 50, 100]
            }
        },
        layout: {
            type: String,
            default: 'total,sizes,prev,pager,next,jumper'
        },
        background: {
            type: Boolean,
            default: true
        },
        padding: {
            type: String,
            default: '12px 0'
        },
        showTotalPage: Boolean
    },

    methods: {
        pageChange(val) {
            this.$emit('update:pageNum', val)
            this.$emit('change', { pageNum: val })
        },
        sizeChange(val) {
            this.$emit('update:pageSize', val)
            this.$emit('change', { pageSize: val })
        }
    }
}
</script>
<style lang="scss" scoped>
.component-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .extra {
        flex: 1;
    }
    .page {
        display: flex;
        justify-items: center;
				align-items: center;
        .total-pages {
            margin-right: 1px;
            line-height: 22px;
            font-size: 12px;
            color: #606266;
        }
        /deep/.el-pagination{
            padding: 0px 0 0px 5px;
            line-height: 22px;
						.el-input__inner{
							text-align: left;
							font-size: 12px;
							padding-left: 12px;
							line-height: 22px;
							height: 22px;
						}
            button,span:not([class*=suffix]){
                display: inline-block;
                font-size: 12px;
                min-width: 35.5px;
                height: 22px;
                line-height: 22px;
                vertical-align: top;
                box-sizing: border-box;
            }
						.el-pagination__total{
							margin-right: 6px;
						}
						.el-pagination__sizes{
							margin: 0 3px 0 0;
							.el-select{
								margin: 0 0px;
								.el-input{
									margin: 0 0px;
									width: 90px;
									.el-input__inner{
										font-size: 12px;
										border-radius: 4px;
										height: 22px;
    								line-height: 1;
										padding-right: 22px !important;
										&:hover{
											border-color: #C0C4CC
										}
									}
								}
								.el-input--mini .el-input__icon{
									line-height: 1;
									color: #909399;
								}
							}
						}
						.btn-next,.btn-prev,.el-pager li{
							margin: 0 3px;
							background: #F5F7FA;
							color: #606266;
							min-width: 22px;
							border-radius: 4px;
							&:disabled{
                                i{
                                    opacity: 0.4;
                                }
							}
						}
						.btn-next,.btn-prev {
							color: #909399;
						}
						.el-pager li{
							font-size: 12px;
							height: 22px;
							line-height: 22px;
							&:not(.disabled).active {
								background-color: #FF6A6C;
    						color: #FFF;
							}
							&.el-icon-d-arrow-left, &.el-icon-d-arrow-right{
								&::before{
									content: "\e794"
								}
							}
						}
						.el-pagination__jump{
							margin-left: 3px;
							.el-pagination__editor{
								line-height: 22px;
								padding: 0 0px;
								height: 22px;
								text-align: left;
								margin: 0 6px;
								box-sizing: border-box;
								border-radius: 4px;
							}
							.el-input.el-pagination__editor{
								min-width: 48px;
								font-size: 12px;
								width: unset;
								.el-input__inner {
									height: 22px;
									line-height: 22px;
								}
							}
						}
        }
        
    }
}

</style>
<style lang="scss">

</style>
